$(document).ready(function() {
    myAjaxRules = new MyAjaxRules();
});

var tamOriginal = window.innerWidth;
window.addEventListener('load', ajustarTexto, false);
window.addEventListener('load', cargarSesion, false);
window.addEventListener('load', buscador, false);
window.addEventListener('load', init, false);
window.onresize = ajustarTexto;

function init() {

    myAjaxRules.ejecutarAJAX({
        method : "GET",
        url : "../php/getCategoria.php",
        funcionRespuesta : cargarCategorias
    });

    estilosResponsivo();
    asignarCarga();
}

function cargarSesion() {
    $.ajax({
        url : "../php/test.php",
        cache : false,
        success : mostrarUsuario
    });
}

function mostrarUsuario(html) {
    var div = document.getElementById("usuario");
    var texto = document.createTextNode('Bienvenido ' + html);
    div.appendChild(texto);

    var a = document.createElement('a');
    a.href = "#";
    a.id = "desconectar";
    var text = document.createTextNode('    \[X]');
    a.appendChild(text);
    div.appendChild(a);

    var i = document.getElementById("desconectar");

    i.onclick = function() {
        new Messi("¿Desea desconectarse?", {
            title : 'Cerrar Sesión',
            titleClass : 'anim warning',
            height : '75px',
            buttons : [{
                id : 0,
                label : 'Sí',
                val : 'Y'
            }, {
                id : 1,
                label : 'No',
                val : 'N'
            }],
            callback : function(val) {
                if (val == 'Y') {
                    window.location = "./index.html";
                };
            }
        });

    }
}

function asignarCarga(){
    $("#iconoadd").click(function(){
        $("#prueba").load('newadd.html');
    });
}

function ajustarTexto() {
    var tamActual = window.innerWidth;
    var proporcion = (tamActual / tamOriginal) * 100;
    document.body.style.fontSize = proporcion + "%";
}

function buscador() {

    var search = document.getElementById("search");
    var inputs = document.getElementById("inputs");
    search.onclick = function() {
        if (hasClass(inputs, "inputs_no_visible")) {
            toggleClass(inputs, "inputs_no_visible", "inputs_visible");
            var add = document.getElementById('add').style.visibility = 'hidden';
        } else {
            toggleClass(inputs, "inputs_visible", "inputs_no_visible");
            var add = document.getElementById('add').style.visibility = 'visible';
        }
    }
}

function cargarCategorias(datosBD) {

    var datos = JSON.parse(datosBD);

    listaCat = new modelo.ListaCategorias();

    for (var i = 0; i < datos.length; i++) {
        var categoria = new modelo.Categoria(datos[i].idCategoria, datos[i].nombreCategoria);
        listaCat.addCategoria(categoria);

    }

    var divIndice = document.getElementById("indiceGeneral");

    var html = "";

    for (var i = 0; i < listaCat.lista.length; i++) {
        var elemento = listaCat.lista[i];
        html += '<div data-type="cat" id="cat' + elemento.idCategoria + '">';
        html += '<div id="' + elemento.nombreCategoria + '" class="divClick cat_vacia">';
        html += '<li  id="' + elemento.idCategoria + '" class="categoria">';
        html += elemento.nombreCategoria;
        html += '</li>'
        html += '</div>';
        html += '<div id= "contenedorSub' + elemento.idCategoria + '" class= "subcategorias visible" >'
        html += '</div>';
        html += '</div>';
    }

    divIndice.innerHTML = html;
    cargarSubcategorias();

    for (i in listaCat.lista) {
        var elemento = listaCat.lista[i];
        mostrarDatosSubcategorias(elemento, elemento.idCategoria);
    }
    $(divIndice).on("click", "[data-type='subcat']", function(){
        $("#prueba").load("../php/cargaDatos.php", {id:this.id});
    });
    
}

function cargarSubcategorias() {

    var categorias = document.getElementsByClassName('divClick');

    for (var i = 0; i < categorias.length; i++) {
        categorias[i].onclick = function(event) {
            var identificador = this.firstChild.id;
            var objeto = {
                idCategoria : identificador,
                idFuncion : 1
            }
            var categoria = listaCat.getCategoria(identificador);
            if (categoria.subcategorias.length == 0) {

                //ejecutarAjax("../php/getSubcategoria.php", cargarDatosSubcategorias, objeto, identificador);
                myAjaxRules.ejecutarAJAX({
                    method : "GET",
                    url : "../php/getSubcategoria.php",
                    funcionRespuesta : cargarDatosSubcategorias,
                    JSObject : objeto,
                    datosCallback : objeto,
                    palabraBloqueo : "cat",
                    selectorThis : event.target,
                    //descripcion: "Recuperar artículos de la categoría '" + categorias.nombreCategoria + "'",
                    //autoCierreAlertas : false,
                    //ajaxTimeout : 7000,
                    selectoresEstilo : [{
                        selector : event.target,
                        classes : {
                            valorPreparar : "ajax_esperar ajax_stripes ajax_progress-bar",
                            valorFinalizar : "ajax_RESET",
                            valorError : "ajax_error"
                        }
                    }]
                    /*,
                     reglasBloqueo : [[

                     ,
                     {
                     permitir: false,
                     selectorBloqueo: "[data-categoria='"+ id +"'] > .categoria",
                     regExp:/pepe/
                     }
                     ]]*/
                });
            } else {
                cargarDatosSubcategorias(null, objeto);
            }
        }
    }
}

function cargarDatosSubcategorias(datosBBDD, identificador) {
    var categoria = listaCat.getCategoria(identificador.idCategoria);
    var divSub = document.getElementById('contenedorSub' + identificador.idCategoria);
    var divCat = document.getElementById(categoria.nombreCategoria);

    toggleClass(divCat, "cat_vacia", "cat_no_vacia");
    divCat.onclick = function(event) {
        if (hasClass(divSub, "visible")) {
            toggleClass(divSub, "visible", "no_visible");
            toggleClass(divCat, "cat_no_vacia", "cat_vacia");
        } else {
            toggleClass(divSub, "no_visible", "visible");
            toggleClass(divCat, "cat_vacia", "cat_no_vacia");
        }
    }
    if (datosBBDD) {
        llenarObjeto(datosBBDD, identificador);
    } else {
        mostrarDatosSubcategorias(categoria, identificador.idCategoria);
    }

}

function llenarObjeto(datosBBDD, identificador) {
    var categoria = listaCat.getCategoria(identificador.idCategoria);
    var datos = JSON.parse(datosBBDD);

    for (var i = 0; i < datos.length; i++) {
        var subcategoria = new modelo.Subcategoria(datos[i].idSubcategoria, datos[i].nombreSubcategoria, datos[i].idCategoria);
        categoria.addSubcategoria(subcategoria);
    }
    if (identificador.idFuncion == 1) {
        mostrarDatosSubcategorias(categoria, identificador.idCategoria);
    } else {
        buscarSubcategoria(identificador.idCategoria);
    }

}

function mostrarDatosSubcategorias(categoria, identificador) {

    var divCat = document.getElementById('cat' + identificador);

    var html = "";

    var div2 = document.getElementById('contenedorSub' + identificador);

    html += '<ul id="listaSub'+identificador+'">';
    for (var i = 0; i < categoria.subcategorias.length; i++) {
        var subcategoria = categoria.subcategorias[i];
        html += '<li data-type="subcat" id="subcat' + subcategoria.idSubcategoria + '">';
        html += subcategoria.nombreSubcategoria;
        html += '</li>';
    }

    html += '</ul>';

    div2.innerHTML = html;
    asignarEventosSub(categoria);

}

function asignarEventosSub(categoria){
	var subcategorias = categoria.subcategorias;
	for(var i = 0; i < subcategorias.length; i++){}
	
    
}

function estilosResponsivo() {
    if ($(document).width() <= 480) {
        $("#desplegable").append("<button id='toggle'>Usuario</button>").css("top", "50%");

        //$("#indiceListaArriba").slideUp("fast");
        $("#indiceListaArriba").hide();
        $("#toggle").toggle(
            function(event) {
                event.preventDefault();
                $("#indiceListaArriba").slideDown("fast");
                $("#scroll").css("margin-top", "30%");
            },
            function(event) {
                $("#indiceListaArriba").slideUp("fast");
                $("#scroll").css("margin-top", "3%");
            /*if($('#indiceListaArriba').css("heigth") == 'relative'){

             }--Aqui deberemos ver siel heigth de nav es pequeño y en su caso lo convertimos en grande y viceversa*/

        });
    } else {
        //Quitar boton y evento del boton
        $("#toggle").remove();
        //$("#indiceListaArriba").slideDown("fast");
    }

    if ($(document).width() <= 480) {
        $("#desplegable").append("<button id='toggle2'>Categorias</button>");
        //$("#indiceListaArriba").slideUp("fast");
        $("#lista").hide();
        $("#toggle2").click(function(event) {
            event.preventDefault();
            $("#lista").slideToggle("fast");
        });
    } else {
        //Quitar boton y evento del boton
        $("#toggle2").remove();
        $("#lista").slideDown("fast");
    }
    
    
    if ($(document).width() >= 768 && $(document).width() <= 1024) {
        var search = document.getElementById("search");
        var inputs = document.getElementById("inputs");

        if (hasClass(inputs, "inputs_no_visible")) {
            toggleClass(inputs, "inputs_no_visible", "inputs_visible");
        }
        search.onclick = function(){
            //esto est� vacio porque al clickar sobre el icono de buscar, se iba a la
            //funcion de arriba buscador() y hac�a el intercambio de las clases.
        }
    }
}

/*var ver = $('#indiceListaArriba').css("visibility");
 if (ver == 'hidden') {
 $('#lista2 ul').replaceWith($('<select name="listaArriba" class="listaArriba2">').append($('.listaArriba li span').each(function() {
 $("<option value=+'$(this).text'+>'+$(this).text+'</option>")
 })));
 }

 }*/

/* PARA FIJAR LA LISTA
 $(document).scroll(function() {

 var useFixedSidebar = $(document).scrollTop() >= myThresholdValue;
 $('.my-sidebar-items').toggleClass('fixed', useFixedSidebar);

 });*/
